<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app" >
        <!-- 
        默认组件分发：将组件调用时的自定义内容特性，直接替换到组件模板中的 所有 slot 上
        具名组件方法：根据组件调用时的自定义内容特性，为组件模板中 slot 进行固定位置的分发
                      模板定义 - <slot name="插槽名"></slot>
                      调用时的内容 - <template ></template>
        -->
        <my-comp>
            <template v-slot:header>
                <h3>第一个调用</h3>
            </template>

            <p style="color:red">这是第一个调用的主体类容</p>

            <template v-slot:footer>
                <button>第一次调用</button>
            </template>
        </my-comp>
        <br>
        <my-comp>
            <template #header>
                <h3>第二个调用</h3>
            </template>

            <p style="color:goldenrod">这是第二个调用的主体类容</p>

            <template #footer>
                <button>第一次调用</button>
            </template>
        </my-comp>
        
    </div>
</body>
<script type="text/x-template" id="myComp">
    <div style="border: 1px solid black;width: 300px;">
        <!-- 调用时自定义标题结构 -->
        <slot name="header"></slot>
        <hr>
        <!-- 调用时自定义内容结构 -->
        <slot></slot>
        <hr>
        <!-- 调用时自定义脚注结构 -->
        <slot name="footer"></slot>
    </div>
</script>
<script>
    Vue.component("MyComp",{
        template:"#myComp"
    })
    new Vue({
        el:"#app" 
    })
</script>
</html>